<template>
  <div>
    <van-form ref="form">
      <van-field
        readonly
        clickable
        name="是否代他人报备"
        is-link
        label="是否代他人报备"
        required
        :disabled="this.isEdit"
        :value="formData.isSelfFlagLabel"
        placeholder="请选择是否代他人报备"
        @click="isEdit ? (showIsSelfPicker = false) : (showIsSelfPicker = true)"
        :rules="rules.isSelfFlag"
      />
      <van-field
        v-model="formData.vaccor"
        autocomplete="off"
        clearable
        required
        :disabled="isSelfFlag"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        :rules="rules.vaccor"
      />
      <van-field
        readonly
        clickable
        name="员工性质"
        is-link
        label="员工性质"
        required
        :value="formData.empNatureLabel"
        placeholder="请选择员工性质"
        @click="showEmpNaturePicker = true"
        :rules="rules.empNature"
      />
      <van-field
        v-model="formData.cardNo"
        autocomplete="off"
        clearable
        required
        name="身份证号"
        label="身份证号"
        placeholder="请输入身份证号"
        :rules="rules.cardNo"
      />
      <van-field
        v-model="formData.tel"
        autocomplete="off"
        clearable
        required
        name="联系方式"
        label="联系方式"
        placeholder="请输入联系方式"
        :rules="rules.tel"
      />
      <van-field
        readonly
        clickable
        required
        name="是否等待接种"
        is-link
        label="是否等待接种"
        :value="formData.isVaccWaitLabel"
        placeholder="请选择是否等待接种"
        @click="showIsVaccWaitPicker = true"
        :rules="rules.isVaccWait"
      />
      <van-field
        readonly
        clickable
        name="是否放弃接种"
        is-link
        label="是否放弃接种"
        required
        :value="formData.isGiveupVaccLabel"
        placeholder="请选择是否放弃接种"
        @click="showIsGiveupVaccPicker = true"
        :rules="rules.isGiveupVacc"
      />
      <van-field
        readonly
        clickable
        name="是否有放弃接种证明"
        is-link
        label="是否有放弃接种证明"
        required
        :value="formData.isGiveupProveLabel"
        placeholder="请选择是否有放弃接种证明"
        @click="showIsGiveupProvePicker = true"
        :rules="rules.isGiveupProve"
      />
      <van-field
        readonly
        clickable
        name="是否与政府对接"
        is-link
        label="是否与政府对接"
        required
        :value="formData.isDockLabel"
        placeholder="请选择是否与政府对接"
        @click="showIsDockPicker = true"
        :rules="rules.isDock"
      />
      <van-field
        readonly
        clickable
        :value="formData.fvaccDate"
        label="第一次接种时间"
        placeholder="点击选择第一次接种时间"
        @click="dateShow = true"
      />
      <van-calendar
        v-model="dateShow"
        :min-date="minDate"
        :max-date="maxDate"
        :show-confirm="false"
        @confirm="onConfirm"
        @close="onFvaccDateClose"
      >
        <template slot="footer">
          <div class="btns">
            <van-button @click="clearFvaccDate" type="danger" class="cancel-btn"
              >清除时间</van-button
            >
          </div>
        </template>
      </van-calendar>
      <van-field
        readonly
        clickable
        clearable
        :value="formData.svaccDate"
        label="第二次接种时间"
        placeholder="点击选择第二次接种时间"
        @click="svaccDateShow = true"
      />
      <van-calendar
        v-model="svaccDateShow"
        :min-date="minDate"
        :max-date="maxDate"
        :show-confirm="false"
        @confirm="onSvaccConfirm"
        @close="onSvaccDateClose"
      >
        <template slot="footer">
          <div class="btns">
            <van-button @click="clearSvaccDate" type="danger" class="cancel-btn"
              >清除时间</van-button
            >
          </div>
        </template>
      </van-calendar>
      <van-field
        readonly
        clickable
        :value="formData.tvaccDate"
        label="第三次接种时间"
        placeholder="点击选择第三次接种时间"
        @click="tvaccDateShow = true"
      />
      <van-calendar
        clearable
        v-model="tvaccDateShow"
        :min-date="minDate"
        :max-date="maxDate"
        :show-confirm="false"
        @confirm="onTvaccConfirm"
        @close="onTvaccDateClose"
      >
        <template slot="footer">
          <div class="btns">
            <van-button @click="clearTvaccDate" type="danger" class="cancel-btn"
              >清除时间</van-button
            >
          </div>
        </template>
      </van-calendar>
    </van-form>
    <fullLoading v-if="loading"></fullLoading>
    <!-- 是否代他人报备选择 -->
    <van-action-sheet
      v-model="showIsSelfPicker"
      cancel-text="取消"
      :actions="isSelfCodeData"
      @select="onIsSelfConfirm"
    />
    <!-- 员工性质选择 -->
    <van-action-sheet
      v-model="showEmpNaturePicker"
      cancel-text="取消"
      :actions="saEmpNatureCodeData"
      @select="onEmpNaturefirm"
    />
    <!-- 是否等待接种选择 -->
    <van-action-sheet
      v-model="showIsVaccWaitPicker"
      cancel-text="取消"
      :actions="isVaccWaitCodeData"
      @select="onIsVaccWaitConfirm"
    />
    <!-- 是否放弃接种选择 -->
    <van-action-sheet
      v-model="showIsGiveupVaccPicker"
      cancel-text="取消"
      :actions="isGiveupVaccCodeData"
      @select="onIsGiveupVaccConfirm"
    />
    <!-- 是否有放弃接种证明选择 -->
    <van-action-sheet
      v-model="showIsGiveupProvePicker"
      cancel-text="取消"
      :actions="isGiveupProveCodeData"
      @select="onIsGiveupProveConfirm"
    />
    <!-- 是否与政府对接选择 -->
    <van-action-sheet
      v-model="showIsDockPicker"
      cancel-text="取消"
      :actions="isDockCodeData"
      @select="onIsDockConfirm"
    />
      <van-button class="defaultBtn" @click="handleSave">保存</van-button>
  </div>
</template>
<script>
import { saveVaccinationPerson } from "@/api/srvAssurance/epidprevention/vaccination/vaccinationPerson";
import { queryDic, queryArea } from "@/api/common";
export default {
  data() {
    return {
      showIsSelfPicker: false, // 是否代他人报备picker
      showEmpNaturePicker: false, // 员工性质picker
      showIsVaccWaitPicker: false, // 是否等待接种picker
      showIsGiveupVaccPicker: false, // 是否放弃接种picker
      showIsGiveupProvePicker: false, // 是否有放弃接种证明picker
      showIsDockPicker: false, // 是否与政府对接证明picker
      showStartTimePicker: false, // 开始时间
      showEndTimePicker: false, // 竣工时间
      areaShow: false, //区域show
      dateShow: false, //往返日期show
      svaccDateShow: false, //第二次接种时间show
      tvaccDateShow: false, //第三次接种时间show
      minDate: new Date(2019, 0, 1),
      maxDate: new Date(new Date().getFullYear(), 11, 31),
      isSelfFlag: false, //是否代报备disable
      formData: {
        vaccId: "", // 疫苗接种标识
        vaccor: "", // 姓名
        cardNo: "", //身份证号
        tel: "", //联系方式
        empNature: "", // 员工性质
        empNatureLabel: "",
        isSelfFlag: "", // 是否代填报
        isSelfFlagLabel: "",
        isVaccWait: "", // 是否等待接种
        isVaccWaitLabel: "",
        isGiveupVacc: "", // 是否放弃接种
        isGiveupVaccLabel: "",
        isGiveupProve: "", // 是否有放弃接种证明
        isGiveupProveLabel: "",
        isDock: "", //是否与政府对接
        isDockLabel: "",
        fvaccDate: "", // 第一次接种时间
        svaccDate: "", // 第二次接种时间
        tvaccDate: "", //第三次接种时间
        isAdmin: "0",
      },
      rules: {
        vaccor: [{ required: true, message: "请输入姓名", trigger: "onBlur" }],
        cardNo: [
          { required: true, message: "请输入身份证号", trigger: "onBlur" },
          {
            pattern: this.$commonReg.IDNoReg,
            message: this.$commonReg.IDNoMsg,
            trigger: "blur",
          },
        ],
        tel: [
          { required: true, message: "请输入手机号", trigger: "onBlur" },
          {
            pattern: this.$commonReg.phoneReg,
            message: this.$commonReg.phoneMsg,
            trigger: "blur",
          },
        ],
        empNature: [
          { required: true, message: "请选择员工性质", trigger: "onChange" },
        ],
        isSelfFlag: [
          {
            required: true,
            message: "请选择是否代他人填报",
            trigger: "onChange",
          },
        ],
        isVaccWait: [
          {
            required: true,
            message: "请选择是否等待接种",
            trigger: "onChange",
          },
        ],
        isGiveupVacc: [
          {
            required: true,
            message: "请选择是否放弃接种",
            trigger: "onChange",
          },
        ],
        isGiveupProve: [
          {
            required: true,
            message: "请选择是否有放弃接种证明",
            trigger: "onChange",
          },
        ],
        isDock: [
          {
            required: true,
            message: "请选择是否与政府对接",
            trigger: "onChange",
          },
        ],
      },
      dataList: [],
      isSelfCodeData: [], // 是否代报备dic
      saEmpNatureCodeData: [], // 员工性质dic
      isGiveupVaccCodeData: [], // 是否放弃接种dic
      isVaccWaitCodeData: [], // 是否等待接种dic
      isGiveupProveCodeData: [], // 是否有放弃接种证明dic
      isDockCodeData: [], // 是否与政府对接dic
      isEdit: false,
      loading: false,
    };
  },
  mounted() {
    this.getDicData();
  },
  methods: {
    // 获取字典数据
    getDicData() {
      // 是否代他人报备、是否是否等待接种、是否有放弃接种证明、是否放弃接种、是否与政府对接
      queryDic("IS_FLAG_CODE").then((res) => {
        if (res.code == "1000" && res.data) {
          this.isSelfCodeData = res.data;
          this.isVaccWaitCodeData = res.data;
          this.isGiveupVaccCodeData = res.data;
          this.isGiveupProveCodeData = res.data;
          this.isDockCodeData = res.data;
        }
      });
      //员工性质
      queryDic("SA_EMP_NATURE_CODE").then((res) => {
        if (res.code == "1000" && res.data) {
          this.saEmpNatureCodeData = res.data;
        }
      });
    },
    // 保存
    handleSave() {
      this.loading = true;
      this.$refs.form
        .validate()
        .then(async () => {
          let formData = { ...this.formData };
          if (!this.isEdit) {
            // 新增
            delete formData.vaccId;
          }
          //新增或修改基本信息
          this.loading = false;
          let res = await saveVaccinationPerson(formData);
          if (res.code == "1000") {
            this.$Notify({ type: "success", message: "保存成功！" });
            this.$emit("close");
            this.$emit("refresh", formData);
          } else {
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 查询原本信息
    getData(obj) {
      this.isEdit = true;
      for (var key in this.formData) {
        if (obj[key] || obj[key] === 0) {
          this.formData[key] = obj[key];
        }
      }
      this.judgeSelfFlagType(this.isEdit);
    },

    //判断是否代填报类型
    judgeSelfFlagType(isEdit) {
      if (this.formData.isSelfFlag == 0) {
        let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        this.formData.vaccor = userInfo.name;
        this.isSelfFlag = true;
      } else if (!isEdit) {
        this.formData.vaccor = "";
        this.isSelfFlag = false;
      } else {
        this.isSelfFlag = false;
      }
    },
    // 是否代他人报备选择
    onIsSelfConfirm(item) {
      this.formData.isSelfFlag = item.value;
      this.formData.isSelfFlagLabel = item.text;
      this.judgeSelfFlagType(this.isEdit);
      this.showIsSelfPicker = false;
    },
    // 员工性质选择
    onEmpNaturefirm(item) {
      this.formData.empNature = item.value;
      this.formData.empNatureLabel = item.text;
      this.showEmpNaturePicker = false;
    },
    // 是否等待接种选择
    onIsVaccWaitConfirm(item) {
      this.formData.isVaccWait = item.value;
      this.formData.isVaccWaitLabel = item.text;
      this.showIsVaccWaitPicker = false;
    },
    // 是否放弃接种选择
    onIsGiveupVaccConfirm(item) {
      this.formData.isGiveupVacc = item.value;
      this.formData.isGiveupVaccLabel = item.text;
      this.showIsGiveupVaccPicker = false;
    },
    // 是否有放弃接种证明选择
    onIsGiveupProveConfirm(item) {
      this.formData.isGiveupProve = item.value;
      this.formData.isGiveupProveLabel = item.text;
      this.showIsGiveupProvePicker = false;
    },
    // 是否有放弃接种证明选择
    onIsDockConfirm(item) {
      this.formData.isDock = item.value;
      this.formData.isDockLabel = item.text;
      this.showIsDockPicker = false;
    },

    //日期格式
    formatDate(date) {
      return `${date.getFullYear()}-${
        date.getMonth() < 9
          ? "0" + (date.getMonth() + 1)
          : "" + (date.getMonth() + 1)
      }-${date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate()}`;
    },
    // 第一次接种时间选择
    onConfirm(date) {
      this.formData.fvaccDate = this.formatDate(date);
      this.dateShow = false;
    },
    // 第二次接种时间选择
    onSvaccConfirm(date) {
      this.formData.svaccDate = this.formatDate(date);
      this.svaccDateShow = false;
    },
    // 第三次接种时间选择
    onTvaccConfirm(date) {
      this.formData.tvaccDate = this.formatDate(date);
      this.tvaccDateShow = false;
    },
    // 关闭第一次日历
    onFvaccDateClose() {
      this.dateShow = false;
    },
    // 关闭第二次日历
    onSvaccDateClose() {
      this.svaccDateShow = false;
    },
    // 关闭第三次日历
    onTvaccDateClose() {
      this.tvaccDateShow = false;
    },
    //清除第一次接种时间
    clearFvaccDate() {
      this.formData.fvaccDate = "";
      this.dateShow = false;
    },
    //清除第二次接种时间
    clearSvaccDate() {
      this.formData.svaccDate = "";
      this.svaccDateShow = false;
    },
    //清除第三次接种时间
    clearTvaccDate() {
      this.formData.tvaccDate = "";
      this.tvaccDateShow = false;
    },
    // 重置表单
    resetForm() {
      this.formData = {
        vaccId: "", // 疫苗接种标识
        vaccor: "", // 姓名
        cardNo: "", //身份证号
        tel: "", //联系方式
        empNature: "", // 员工性质
        empNatureLabel: "",
        isSelfFlag: "", // 是否代填报
        isSelfFlagLabel: "",
        isVaccWait: "", // 是否等待接种
        isVaccWaitLabel: "",
        isGiveupVacc: "", // 是否放弃接种
        isGiveupVaccLabel: "",
        isGiveupProve: "", // 是否有放弃接种证明
        isGiveupProveLabel: "",
        isDock: "", //是否与政府对接
        isDockLabel: "",
        fvaccDate: "", // 第一次接种时间
        svaccDate: "", // 第二次接种时间
        tvaccDate: "", //第三次接种时间
        isAdmin: "0",
      };
      this.isSelfFlag = false;
      this.isEdit = false;
      setTimeout(() => {
        this.$refs.form.resetValidation();
      });
    },
  },
};
</script>

<style scoped lang="less">
.listCon {
  .cellContent {
    .bottom {
      margin-top: 3px;
      padding: 3px 5px 0;
    }
    .flexTit {
      .isSelf {
        padding: 5px;
        text-align: left;
        color: red;
      }
      .other {
        text-align: right;
        font-size: 9px;
      }
    }
    .result {
      padding-left: 20px;
    }
  }
}
</style>
